<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form ref="queryForm" :model="queryForm" inline :label-width="70">
          <Form-item label="角色名称" prop="roleName">
            <Select v-model="queryForm.operateType" style="width:200px">
              <Option :value="1">操作日志</Option>
              <Option :value="2">异常日志</Option>
            </Select>
          </Form-item>
          <Form-item style="margin-left:-35px;" class="br">
            <Button @click="handleSearch" type="primary" size="large" icon="ios-search">搜索</Button>
            <Button @click="handleReset" size="large">重置</Button>
          </Form-item>
        </Form>
      </Row>
      <Row class="operation">
        <Button @click="delAll" size="large" icon="md-trash">删除</Button>
      </Row>
      <Row>
        <Alert show-icon>
          已选择
          <span class="select-count">{{selectCount}}</span> 项
          <a class="select-clear" @click="clearSelectAll">清空</a>
        </Alert>
      </Row>
      <Row>
        <Table
          :loading="loading"
          border
          :columns="columns"
          :data="data"
          sortable="custom"
          @on-sort-change="changeSort"
          @on-selection-change="showSelect"
          ref="table"
        ></Table>
      </Row>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="queryForm.pageNum"
          :total="total"
          :page-size="queryForm.pageSize"
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10,20,50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
import {logList,deleteLog} from "@/api/log";
export default {
  name: "Log",
  data(){
    return{
      queryForm:{
        pageNum: 1,
        pageSize: 10,
        roleName:''
      },
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static',
      },
      loading:false,
      total:null,
      permissionVisible:false,
      menuData:[],
      treeLoading:false,
      selectAllFlag:false,
      permissionLoading:false,
      permissionTitle:'设置权限',
      roleId:null,
      columns:[
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          type: "index",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "请求ip",
          key: "requestIp",
          align: 'center',
          minWidth: 100,
          sortable: true,
        },
        {
          title: "日志类型",
          key: "type",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            if (params.row.type == 1) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "success",
                    text: "操作日志"
                  }
                })
              ]);
            } else if (params.row.type == 2) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "error",
                    text: "错误日志"
                  }
                })
              ]);
            }
          }
        },
        {
          title: "操作用户",
          key: "userName",
          sortable: true,
          align: 'center',
          minWidth: 100,
        },
        {
          title: "操作方法",
          key: "userName",
          sortable: true,
          align: 'center',
          minWidth: 100,
        },
        {
          title: "调用开始时间",
          key: "startTime",
          sortable: true,
          align: 'center',
          minWidth: 150,
        },
        {
          title: "调用结束时间",
          key: "endTime",
          sortable: true,
          align: 'center',
          minWidth: 150,
        },
        {
          title: "操作",
          key: "action",
          align: 'center',
          width: 100,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.del(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        },
      ],
      selectCount:0,
      selectList:[],
      data:[],
    }
  },
  methods:{
    handleSearch(){
      this.getLogList();
    },
    clearSelectAll(){
      this.selectList=[];
      this.selectCount=0
      this.$refs.table.selectAll(false);
    },
    changePageNum(v){
      this.queryForm.pageNum=v;
      this.getLogList();
    },
    changePageSize(value) {
      this.queryForm.pageSize=value;
      this.getLogList();
    },
    changeSort(){

    },
    showSelect(v){
      this.selectCount=v.length;
      this.selectList=v;
    },
    del(row){
      this.selectCount = 1;
      this.selectList.push(row);
      this.delAll();
    },
    delAll(){
      let that=this;
      if(that.selectList.length<=0){
        this.$Message.warning('请至少选择一条数据');
        return ;
      }
      debugger
      this.$Modal.confirm({
        title: "确认删除",
        content:"您确认要删除所选的 " + this.selectCount + " 条数据?",
        loading: true,
        onOk: () => {
          let data=this.selectList;
          let ids='';
          data.forEach(e=>{
            ids+=e.id+','
          })
          ids=ids.substring(0,ids.length-1);
          deleteLog(ids).then(res=>{
            if(res.code===200){
              this.$Message.success('操作成功');
            }
            this.getLogList();
            this.selectList = [];
            this.selectCount = 0;
            this.$Modal.remove()
          })
        }
      });
    },
    handleReset(){
      this.$refs['queryForm'].resetFields();
      this.getLogList();
    },
    getLogList() {
      this.loading=true
      logList(this.queryForm).then(res=>{
        if(res.code===200){
          this.data=res.data.records;
          this.total=res.data.total;
          this.loading=false;
        }
      })
    }
  },
  mounted(){
    this.getLogList();
  }
}
</script>

<style lang="less">
@import "../../styles/table-common.less";
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.menuModal{
  .ivu-modal-body{
    max-height: 550px;
    overflow: auto;
    font-size: 12px;
    line-height: 1.5;
    padding: 16px;
  }
}
</style>
